<template>
  <nav-bar />
  <div class="container">
    <!-- 主要内容区域 -->
    <div class="title">标题</div>
    <!-- info -->
    <div class="info">
      <div class="author">
        <SvgIcon name="email" :size="iconSize" />
        沐歌
      </div>
      <div class="time">
        <SvgIcon name="email" :size="iconSize" />
        2012/12/16
      </div>
      <div class="visited">
        <SvgIcon name="email" :size="iconSize" />
        999+
      </div>
    </div>
    <div class="detail"> 内容区域 </div>
    <div class="pay">
      <div class="title"> 读后有收获的话可以请博主喝杯奶茶~ </div>
      <div class="pay-list">
        <van-image :src="alipayImg" />
        <van-image :src="webchatImg" />
      </div>
    </div>
    <!-- 分享 -->
    <!-- <div class="share">

		</div> -->
    <!-- 评论 -->
    <!-- <div class="comment"> </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import SvgIcon from '@comp/SvgIcon/index.vue'
  import NavBar from '@comp/Navbar/Navbar.vue'
  // 图片
  import alipayImg from '../../assets/img/pay/Alipay.jpg'
  import webchatImg from '../../assets/img/pay/webchat_pay.png'
  const iconSize = ref<number>(15)
</script>
<style lang="scss" scoped>
  $paddingBottom: 10px;

  .container {
    padding: $padding;

    .title {
      @include marginTop(15px);

      margin-bottom: $marginBottom;
      font-size: $blogDetail-title-size;
      text-align: center;
    }

    .info {
      @include marginTop(15px);

      display: flex;
      font-size: $blog-text-size;
      color: $nav-bar-detail-color;
      justify-content: center;
      padding-bottom: $paddingBottom;
      border-bottom: $about-border;

      .time,
      .author,
      .visited {
        margin-right: 20px;
      }
    }
    // 内容
    .detail {
      @include marginTop(15px);

      width: 100%;
      font-size: $blog-text-size;
      padding: 5px 0;
    }
    //支付
    .pay {
      border-top: $about-border;
      padding-bottom: $paddingBottom;

      .pay-list {
        display: flex;

        > img {
          flex: 1;
        }
      }
    }
  }
</style>
